<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set的调用</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
       
      <h1>学校信息</h1>
      <h2>学校：{{name}}</h2>
      <h2>地址：{{address}}</h2>
      <hr>

      <h1>学生信息</h1>
      <h2>姓名：{{student.name}}</h2>
      <button @click="addSex">点击添加一个性别属性</button>
      <!-- (2) 如果是未定义的属性页面上是不显示undefined的，因为undefined只有开发人员才看得懂 -->
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：真实{{student.age.sAge}},虚假{{student.age.rAge}}</h2>
      <h2>爱好</h2>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
            {{h}}
        </li>
      </ul>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}} --- {{f.age}}
        </li>
      </ul>
   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
               name:'尚硅谷',
               address:'扬州',
               student:{
                  name:'周杰',
                  age:{
                     rAge: 40,
                     sAge: 19
                  },
                // (1) 不止一个要用数组，注意
                  friends:[
                    {name:'zhoujie1',age:17},
                    {name:'zhoujie2',age:17}
                  ],
                  hobby:['抽烟','喝酒','烫头'] 
               }
            },
            methods: {
                addSex(){
                /**
                 * (2) 想要添加响应式的属性必须要使用set()方法，否则仅仅是加了一个属性却没有setter和getter
                 *     无法响应到页面
                 * (3) 有两种方式一个是 通过Vue构造函数 还有一个是 通过vm实例，实例的set有$符号
                 *     可以这么理解：一个是Vue实例快生成的时候设置还有一个是Vue实例生成之后再添加
                 * (4) 缺陷：不可以直接在 vm或 vm._data上面使用set()，只能在data中某个属性的内部添加
                 *     可以这么理解：vm或 vm._data上的属性Vue就希望在初始化时就定下来，然后不希望改变
                 *     然后只希望在内部某个属性的更新，这样是为了减少动态改变整体的各个属性
                 * (5) 第二个参数 可以是属性 也可以 是下标
                 *     属性是为了添加新的属性
                 *     下标是为了 在数组某个位置进行替换
                 * 
                 * */ 
                //    Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')

                Vue.set(this.student.friends,0,{name:'zhoujie3',age:99},)
                }
            },
        })
    </script>
</body>
</html>